<template>
	<view class="box">
		<view class="AdvertisingColumn-container">
			<view class="title" v-if="asData.parameters.isShowTitle">{{ asData.parameters.title }}</view>
		
			<view class="content" :style="{ width: asData.parameters.list.length * 210 + 'rpx' }">
				<view v-for="(item, index) in asData.parameters.list" :key="index" @click="goDetail(item.linkCom)">
					<!-- <image src="@/assets/images/empty-banner.png" alt="" v-if="!item.image" />
					<image :src="item.image" alt="" v-else /> -->
					<u--image :src="item.image" mode="scaleToFill" width="100%" :height="asData.parameters.height * 4 + 'rpx'" radius="8"></u--image>
					<view class="name">{{ item.linkName ? item.linkName : "商品名称" }}</view>
					<view class="desc">{{ item.linkDesc }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex" 
	export default {
		props: {
			asData: {
				type: Object
			}
		},
		computed:{
			...mapState(['scene'])
		},
		methods:{
			goDetail(linkCom) {
			if(!this.scene || !linkCom) {
				uni.switchTab({
					url:'/pages/tab_bar/classify/classify'
				})
				return
			}
				this.$u.route(linkCom)
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding: 10rpx 30rpx 30rpx;
	}
	.AdvertisingColumn-container {
		width: 100%;
		overflow-x: auto;
		background-color: #FFFAEE;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(4,0,0,0.04);
		.title {
			padding-left: 20rpx;
			font-size: 28rpx;
			line-height: 60rpx;
			color: #606266;
		}

		.content {
			display: flex;
			// margin-top: 10rpx;
			padding: 10rpx;
			&>view {
				box-sizing: border-box;
				width: 230rpx;
				padding: 10rpx;
				image {
					width: 100%;
					height: 200rpx;
				}

				.name {
					font-weight: 600;
					font-size: 24rpx;
					line-height: 44rpx;
					color: #111111;
				}

				.desc {
					font-size: 20rpx;
					line-height: 30rpx;
					color: #666666;
				}
			}
		}
	}
</style>